<template>
  <div class="main">
    <div class="main__div--top">
      <div class="top__div--left">
        <div class="left__div--top">
          <div class="block">
            <el-avatar :size="100" :src="circleUrl"></el-avatar>
          </div>
          <h1 class="title">{{ nickName }}</h1>
          <i class="el-icon-setting setting" @click="jump"></i>
        </div>
        <div class="left__div--bottom">
          <el-calendar v-model="value"></el-calendar>
        </div>
      </div>
      <div class="top__div--right">
        <div class="right__div--top">
          <div class="top__div--last-left">
            <div class="last-left__div--top">
              <div class="nickname">
                <h1>{{ greetings }}好！</h1>
                <h1>{{ nickName }}！</h1>
              </div>
              <h1>劳逸结合是不错,但也别放松过头！</h1>
            </div>
            <div class="last-left__div--bottom">
              <div class="city">
                <h1>江苏省 {{ weather.city }}市</h1>
                <div class="weater">
                  <span>{{ weather.wea }}</span
                  >&nbsp;
                  <span>{{ weather.tem2 }}℃~{{ weather.tem1 }}℃</span>
                </div>
              </div>
              <i :class="icon" style="font-size: 100px"></i>
            </div>
          </div>
          <div class="top__div--last-right">
            <h1>通知公告</h1>
            <ul class="list">
              <li>劳逸结合是不错,但也别放松过头！</li>
              <li>劳逸结合是不错,但也别放松过头！</li>
              <li>劳逸结合是不错,但也别放松过头！</li>
              <li>劳逸结合是不错,但也别放松过头！</li>
              <li>劳逸结合是不错,但也别放松过头！</li>
            </ul>
          </div>
        </div>
        <div class="right__div--bottom">
          <h1>任务概况</h1>
          <div class="mission">
            <div ref="mission"></div>
            <div class="mission__top">
              <h1>本月工作具体完成情况</h1>
              <div class="right__bottom">
                <div v-for="item of mission" :key="item.name">
                  <h1>{{ item.value }}</h1>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main__div--bottom">
      <div class="bottom__div--left" ref="achieveCharts"></div>
      <div class="bottom__div--right" ref="expectCharts"></div>
    </div>
  </div>
</template>

<style scoped>
.main {
  height: 95%;
  display: flex;
  flex-direction: column;
}

.main__div--top {
  flex: 7;
  display: flex;
}

.main__div--bottom {
  flex: 3;
  margin-top: 10px;
  display: flex;
}

.top__div--left,
.top__div--right {
  height: 100%;
}

.top__div--left {
  flex: 3;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.top__div--right {
  flex: 7;
  display: flex;
  flex-direction: column;
}

.left__div--top,
.left__div--bottom {
  background: rgba(255, 255, 255, 0.6);
}

.left__div--top {
  flex: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.left__div--bottom {
  margin-top: 10px;
  flex: 6;
}

.right__div--top {
  flex: 4;
  display: flex;
}

.right__div--bottom {
  margin-top: 10px;
  flex: 6;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
}

.right__div--bottom > h1 {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.right__div--bottom > div {
  flex: 8;
}

.top__div--last-left {
  flex: 4;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.top__div--last-right {
  flex: 6;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.list li {
  margin: 10px 0;
  color: orangered;
}

.last-left__div--top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.last-left__div--top > .nickname {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.last-left__div--top > h1 {
  color: orangered;
}

.last-left__div--top,
.last-left__div--bottom {
  flex: 5;
  background: rgba(255, 255, 255, 0.6);
}

.last-left__div--bottom {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 40px;
}

.bottom__div--left,
.bottom__div--right {
  background: rgba(255, 255, 255, 0.6);
}

.bottom__div--left {
  flex: 6;
  margin-right: 10px;
}

.bottom__div--right {
  flex: 4;
}

.title {
  font-size: 24px;
  margin-top: 15px;
}

.setting {
  position: absolute;
  font-size: 40px;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

>>> .el-calendar-table .el-calendar-day {
  height: 100%;
  text-align: center;
}

.city {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.mission {
  display: flex;
}

.mission div:nth-of-type(1) {
  flex: 5;
}

.mission div:nth-of-type(2) {
  flex: 5;
}

.mission__top {
  text-align: center;
}

.right__bottom {
  display: flex;
  height: 90%;
}

.right__bottom div {
  flex: 3 !important;
  border-radius: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right__bottom div span {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  line-height: 50px;
  font-size: 22px;
  color: #444;
}

.right__bottom div h1 {
  font-size: 50px;
  color: orange;
}
</style>

<script>
import * as echarts from "echarts";
import { getTarskData, getRateData, getExpectData, weather } from "@/api";

export default {
  data() {
    return {
      value: new Date(),
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      nickName: "",
      mission: [],
      weather: [],
    };
  },
  computed: {
    greetings() {
      return new Date().toLocaleTimeString().substr(0, 2);
    },
    icon() {
      let wea_icon = "";
      switch (this.weather.wea_img) {
        case "yin":
          wea_icon = "el-icon-cloudy";
          return wea_icon;
          break;
        case "qing":
          wea_icon = "el-icon-sunny";
          return wea_icon;
          break;
        case "yu":
          wea_icon = "el-icon-heavy-rain";
          return wea_icon;
          break;
        case "yun":
          wea_icon = "el-icon-cloudy-and-sunny";
          return wea_icon;
          break;
        case "lei":
          wea_icon = "el-icon-lightning";
          return wea_icon;
          break;
        default:
          wea_icon = "el-icon-partly-cloudy";
          return wea_icon;
      }
    },
  },
  created() {
    // 天气请求
    weather().then((res) => {
      this.weather = res.data.data[0];
      //  console.log(this.weather);
    });
  },
  mounted() {
    // 获取登录信息拿到昵称
    let nn = JSON.parse(localStorage.getItem("userInfo")).userInfo.nickname;
    this.nickName = nn;

    this.$nextTick(function () {
      //传递一个dom元素
      let generalCharts = echarts.init(this.$refs.mission);
      //任务情况
      getTarskData().then((res) => {
        this.mission = [...res.data.data];

        let data = res.data.data;
        let missionOption = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "bottom",
            left: "left",
            orient: "vertical",
          },
          color: ["#409eff", "#e6a23c", "#f56c6c"],
          series: [
            {
              name: "修复情况",
              type: "pie",
              radius: ["40%", "80%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20",
                  fontWeight: "bold",
                  formatter: "{c}%",
                  color: "green",
                },
              },
              labelLine: {
                show: false,
              },
              data,
            },
          ],
        };
        generalCharts.setOption(missionOption);
      });

      // 业绩模块
      let achieveCharts = echarts.init(this.$refs.achieveCharts);
      getRateData().then((res) => {
        // console.log(res);
        let name = [];
        let value = [];
        res.data.data.forEach((item) => {
          name.push(item.name);
          value.push(item.rate);
        });

        let performanceOption = {
          xAxis: {
            type: "category",
            data: name,
            show: false,
          },
          yAxis: {
            type: "value",
            show: false,
          },
          label: {
            //提示内容
            show: true,
            formatter: "{b}:{c}%", //格式化内容
          },
          series: [
            {
              data: value,
              type: "line",
              smooth: true,
            },
          ],
        };
        achieveCharts.setOption(performanceOption);
      });

      // 期望模块
      let expectCharts = echarts.init(this.$refs.expectCharts);
      getExpectData().then((res) => {
        // console.log(res);
        let data = [];
        res.data.data.forEach((item) => {
          let obj = {
            value: item.rate,
            name: item.title,
          };
          data.push(obj);
        });

        let expectOption = {
          title: {
            text: "期待课程",
            left: "left",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "right",
            left: "right",
          },
          series: [
            {
              name: "期待值",
              type: "pie",
              radius: "70%",
              data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 50,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        expectCharts.setOption(expectOption);
      });

      // 页面尺寸发生改变时，echars图形也跟着变
      window.onresize = function () {
        generalCharts.resize();
      };
    });
  },
  methods: {
    // 用户点击设置跳转到个人中心
    jump() {
      this.$router.push({ name: "mine" });
    },
  },
};
</script>
